<!-- src/public/views/componentsWeb/ValueCheckboxWidget.vue -->
<template>
  <div class="value-checkbox-container">
    <div class="value-checkbox-wrapper" :style="{ width: width }">
      <span class="value-checkbox-amount">{{displayText}}</span>
      <slot></slot>
      <el-checkbox 
        v-if="editable" 
        :model-value="checkValue" 
        class="value-checkbox-checkbox" 
        @change="handleCheckChange">
      </el-checkbox>
      <!--
      <span v-else class="checkbox-display">{{ checkValue ? '是' : '否' }}</span>
      -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'ValueCheckboxWidget',
  props: {
    displayText: {
      type: String,
      default: 0
    },
    checkValue: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '200px'
    }
  },
  emits: ['update:checkValue'],
  methods: {
    handleCheckChange(value) {
      this.$emit('update:checkValue', value);
    }
  }
}
</script>

<style scoped>
.value-checkbox-container {
  display: flex;
  justify-content: flex-start;
}

.value-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.value-checkbox-amount {
  flex: 1;
  text-align: left;
}

.value-checkbox-checkbox {
  margin-left: 8px;
}

.checkbox-display {
  padding: 0 8px;
}
</style>